<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="waeather, forecast, australia weather, school temparature, school weather" />
<meta name="description" content="Townsville Weather Simulation" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Townsville Weather Simulation</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />



    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAZVDkl-F3GrbtoykJ0vlXmRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQQgMQoQfsfQLAwyBqdgrngwFRezw" type="text/javascript">

    </script>
    
    <script type="text/javascript">


    /**
     * Variable declarations
     */

    var listTest = "list";
    var p_prop = "prop";
    var p_wsid = "wsid";
    var p_key = "key";
    var param_MasterKey = "0AvQRDNimJN-hdGo2VGJ2UmtqcXplNl83M3hyWXpfT0E";
    var param_MasterwsID = "od6";
    var param_wsId = "od6";
    var param_ssKey = "0AvQRDNimJN-hdGo2VGJ2UmtqcXplNl83M3hyWXpfT0E";
    var param_useSidebar = false;
    var param_titleColumn = "project";
    var param_descriptionColumn = "description";
    var param_department = "department";
    var param_collaborators = "collaborators";
    var param_extramarkers = "markerplus";
    var param_linkColumn = "link";
    var param_extraInfo = "extrainfo";
    var param_imageColumn = "image";
    var param_imageDes = "desimage";
    var param_latColumn = "latitude";
    var param_lngColumn = "longitude";
    var param_rankColumn = "rank";
    var param_iconType = "green";
    var param_iconOverType = "orange";
    var usingRank = true;
    var jsoncurrent;
    var keyArray = [];
    var nameArray = [];
    var wsidArray = [];
    var mKeyLength = 0;
    var markerSL;
    var keyword = "";
    var depword = "";
    var depBounds;
    var searchBounds;
    var searchOn = new Boolean("true")
        

    /**
     * Loads map and calls function to load in worksheet data.
     */
    function cm_load() {  
      if (GBrowserIsCompatible()) {
        // create the map
        cm_map = new GMap2(document.getElementById("cmmap"));
        cm_map.addControl(new GLargeMapControl());
        cm_map.addControl(new GMapTypeControl());
        cm_map.setMapType(G_NORMAL_MAP);                          //----------------------------Sets default map view
        cm_map.enableScrollWheelZoom()
        cm_map.setCenter(new GLatLng( 43.907787,-79.359741), 2);
        cm_getJSON(param_ssKey, param_wsId);
      } else {
        alert("Sorry, the Google Maps API is not compatible with this browser");
      }
    }


    /**
     * Creates a script tag in the page that loads in the
     * JSON feed for the specified key/ID.
     * Once loaded, it calls cm_loadMapJSON.
     */
    function cm_getJSON(param_ssKey, param_wsid) {

      // Retrieve the JSON feed.
      var script = document.createElement('script');

      script.setAttribute('src', 'http://spreadsheets.google.com/feeds/list'
                             + '/' + param_ssKey + '/' + param_wsId + '/public/values' +
                            '?alt=json-in-script&callback=cm_loadMapJSON'); 

	  //alert(script.getAttribute('src'));
      script.setAttribute('id', 'jsonScript');
      script.setAttribute('type', 'text/javascript');
      document.documentElement.firstChild.appendChild(script);
    }

    /**
     * Called when JSON is loaded. Creates sidebar if param_sideBar is true.
     * Sorts rows if param_rankColumn is valid column. Iterates through worksheet rows,
     * creating marker and sidebar entries for each row.
     * @param {JSON} json Worksheet feed
     */      
    function cm_loadMapJSON(json) {
      

      if(param_useSidebar == true) {
        var sidebarTD = document.createElement("td");
        sidebarTD.setAttribute("width","150");
        sidebarTD.setAttribute("valign","top");
        var sidebarDIV = document.createElement("div");
        sidebarDIV.id = "cm_sidebarDIV";
        sidebarDIV.style.overflow = "auto";
        sidebarDIV.style.height = "450px";
        sidebarDIV.style.fontSize = "11px";
        sidebarDIV.style.color = "#000000";
        sidebarTD.appendChild(sidebarDIV);
        document.getElementById("cm_mapTR").appendChild(sidebarTD);
      }

      var bounds = new GLatLngBounds(); 

      /*if(json.feed.entry[0]["gsx$" + param_rankColumn]) {
        usingRank = true;
        json.feed.entry.sort(cm_sortRows);
      }*/

      for (var i = 0; i < json.feed.entry.length; i++) {
        var entry = json.feed.entry[i];

        if(entry["gsx$" + param_latColumn]) {
          var lat = parseFloat(entry["gsx$" + param_latColumn].$t);
          var lng = parseFloat(entry["gsx$" + param_lngColumn].$t);
          var point = new GLatLng(lat,lng);
          var html = "<div style='font-size:12px'>";
          html += "<strong>" + entry["gsx$"+param_titleColumn].$t
                  + "</strong>";
          var label = entry["gsx$"+param_titleColumn].$t;
          var rank = 0;
          //alert("abt to check");
          if(usingRank && entry["gsx$" + param_rankColumn]) {
        	  //alert("check 1");
            rank = parseInt(entry["gsx$"+param_rankColumn].$t);
            //alert("check 1.." + rank);
          }
          if(entry["gsx$" + param_department]) {
            html += "<br/>" + "<b>Project Department: </b>" + entry["gsx$"+param_department].$t;
          }
          if(entry["gsx$" + param_descriptionColumn]) {
            html += "<br/>" + "<b>Project Description: </b>" + entry["gsx$"+param_descriptionColumn].$t;
          }
          if(entry["gsx$" + param_collaborators]) {
            html += "<br/>" + "<b>Collaborators: </b>" + entry["gsx$"+param_collaborators].$t;
          }
          if(entry["gsx$" + param_linkColumn]) {
    		var temp = entry["gsx$" + param_linkColumn].$t;
    	html += "<br/>" + "<b>Link: </b>" + '<a href=' + temp + '>' + temp + '</a>';
          }
          if(entry["gsx$" + param_extraInfo]) {
    		var temp = entry["gsx$" + param_extraInfo].$t;
    	html += "<br/>" + temp;
          }
          //if(entry["gsx$" + param_imageDes]) {
          //  html += "<br/>" + entry["gsx$"+param_imageDes].$t;
          //}
          if(entry["gsx$" + param_imageColumn]) {
    		var temp = entry["gsx$" + param_imageColumn].$t;
            html += "<br/>" + '<img src=' + temp + ' height=100 width=200 alt=ProjectImage/>'; // + entry["gsx$"+ pram_imageColumn].$t;
          }

          html += "</div>";

          if(entry["gsx$" + param_extraInfo]) {
      		var stationCode = entry["gsx$" + param_extraInfo].$t;
      	  }
          
    	var search = "false";
          // create the marker
          var marker = cm_createMarker(point,label,stationCode,rank, search);
          cm_map.addOverlay(marker);
          cm_mapMarkers.push(marker);
          cm_mapHTMLS.push(html);
          bounds.extend(point);
     
          if(param_useSidebar == true) {
            var markerA = document.createElement("a");
            markerA.setAttribute("href","javascript:cm_markerClicked('" + i +"')");
            markerA.style.color = "#000000";
            var sidebarText= "";
            if(usingRank) {
              sidebarText += rank + ") ";
            }
            sidebarText += label;
            markerA.appendChild(document.createTextNode(sidebarText));
            sidebarDIV.appendChild(markerA);
            sidebarDIV.appendChild(document.createElement("br"));
            sidebarDIV.appendChild(document.createElement("br"));
          }
        }
      }

      cm_map.setZoom(cm_map.getBoundsZoomLevel(bounds));
      cm_map.setCenter(bounds.getCenter());

      jsoncurrent = json;
    }


    

     /**
      * Creates marker with ranked Icon or blank icon,
      * depending if rank is defined. Assigns onclick function.
      * @param {GLatLng} point Point to create marker at
      * @param {String} title Tooltip title to display for marker
      * @param {String} html HTML to display in InfoWindow
      * @param {Number} rank Number rank of marker, used in creating icon
      * @return {GMarker} Marker created
      */
     function cm_createMarker(point, title, html, rank, search) {
       var markerOpts = {};
       var nIcon = new GIcon(cm_baseIcon);

       //alert(rank);
       

       if(rank > 0 && rank < 100) {
         nIcon.imageOut = "http://gmaps-samples.googlecode.com/svn/trunk/" +
             "markers/" + param_iconType + "/marker" + rank + ".png";
         nIcon.imageOver = "http://gmaps-samples.googlecode.com/svn/trunk/" +
             "markers/" + param_iconOverType + "/marker" + rank + ".png";
         nIcon.image = nIcon.imageOut;
       } else if(search == "true") {
     	nIcon.imageOut= "http://gmaps-samples.googlecode.com/svn/trunk/markers/red/blank.png";
     	nIcon.imageOver = "http://gmaps-samples.googlecode.com/svn/trunk/markers/orange/blank.png";
     	nIcon.image = nIcon.imageOut;
     	}
      else if(search == "dep") {
     	nIcon.imageOut= "http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png";
     	nIcon.imageOver = "http://gmaps-samples.googlecode.com/svn/trunk/markers/green/blank.png";
     	nIcon.image = nIcon.imageOut;
     	}	
     	else {
         nIcon.imageOut = "http://gmaps-samples.googlecode.com/svn/trunk/" +
             "markers/" + param_iconType + "/blank.png";
         nIcon.imageOver = "http://gmaps-samples.googlecode.com/svn/trunk/" +
             "markers/" + param_iconOverType + "/blank.png";
         nIcon.image = nIcon.imageOut;
       }

       markerOpts.icon = nIcon;
       markerOpts.title = title;  
       var marker = new GMarker(point, markerOpts);
       GEvent.addListener(marker, "click", function() {
           //alert(html);
         //marker.openInfoWindowHtml(html);
          document.location.href="weather.php?stationid="+html;
       });
       GEvent.addListener(marker, "mouseover", function() {
         marker.setImage(marker.getIcon().imageOver);
       });
       GEvent.addListener(marker, "mouseout", function() {
         marker.setImage(marker.getIcon().imageOut);
       });
       GEvent.addListener(marker, "infowindowopen", function() {
         marker.setImage(marker.getIcon().imageOver);
       });
       GEvent.addListener(marker, "infowindowclose", function() {
         marker.setImage(marker.getIcon().imageOut);
       });
       return marker;
     }
          

    </script>

<!-- 

Google Analytics code implemtion block, The ID below should match with Google analytics registartion. Updating below code block before end of </head> tag

  _gaq.push(['_setAccount', 'UA-19282567-1']);


-->

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-19282567-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</head>
<body>
	<div id="header">
		<div id="logo">
		<img src="images/weather.jpg" width=900px height=150px border=0 />
		</div>
	</div>
	<!-- end #header -->
	<div id="menu">
		<ul>
			
			<li><a href="index.php">Townsville Weather</a></li>
			<li><a href="wnews.php">Weather News</a></li>
			<li><a href="videos.php">Knowledge Repository</a></li>
			<li><a href="aboutus.php">Abous Us</a></li>
            <li><a href="feedback.php">Feedback</a></li>
			<li><a href="contactus.php">Contact Us</a></li>
        </ul>
	</div>
	<!-- end #menu -->
<div id="wrapper">
<div class="btm">
	<div id="page">
		<div id="content">
			<div class="post">
				<div class="entry">
				<Form name="current_search" action="compareschools.php">
				<p><font size=4>Current Conditions:</font>

				<?php
						try
						{
						// Import database util script once to get the properties and getConnection() function
						require_once 'databaseUtil.php';
						$catConn = getConnection();
						$stations_sql="select * from stations";
						$stations = mysql_query($stations_sql,$catConn);
            		    echo "<select name=school_one>";
						while($stationREC = mysql_fetch_array($stations))
						  {
							echo "<option value=".$stationREC["stationid"].">".$stationREC["name"]."</option>";
						  }
						echo "</select> &nbsp;&nbsp;&nbsp;";

						$stations_sql="select * from stations";
						$stations = mysql_query($stations_sql,$catConn);
            			echo "<select name=school_second>";
						while($stationREC = mysql_fetch_array($stations))
						  {
							echo "<option value=".$stationREC["stationid"].">".$stationREC["name"]."</option>";
						  }
						echo "</select> &nbsp;&nbsp;&nbsp;";
						closeConnection($catConn);
						}catch(Exception $dbEX)
						{
						closeConnection($catConn);
						echo "<br><br>System error: Unable to connect to database and retrieve weather station names...";
						}
				?>

				<Input type=submit value="COMPARE">
				</Form>
				</div>
				<p class="meta"><b>Click on any School name below to get weather details/analysis.</b></p>
			</div>
            
         <div class="post">

<?php
try
{
// Import database util script once to get the properties and getConnection() function
//require_once 'databaseUtil.php';
$catConn = getConnection();
$stations_sql="select * from stations";
$stations = mysql_query($stations_sql,$catConn);

 echo "<table  cellspacing=5px align=top border=0>";
 echo '<tr><td colspan=4 valign=top><div id=cmmap style="width: 850px; height: 500px"></div></td></tr>';

 $recCounter=0;

while($stationREC = mysql_fetch_array($stations))
  {
  
   if ( $recCounter == 0 )
	  {
	   echo "<tr>";
	   $recCounter=0;
	  }
   if ( $recCounter == 2 )
	  {
	   echo "</tr><tr>";
	   $recCounter=0;
	  }
   echo "<td><h1>". (ord($stationREC["stationid"])-64) .":</h1></td>";
   echo "<td><a href=weather.php?stationid=".$stationREC["stationid"].">".$stationREC["name"]."</a><br />".$stationREC["address"]."</td>";

	$recCounter+=1;

  }
closeConnection($catConn);
}catch(Exception $dbEX)
{
closeConnection($catConn);
echo "<br><br>System error: Unable to connect to database and retrieve weather station names...";
}
?>

</tr></table>
          </div>          
           
            
            
		</div>
		<!-- end #content -->
		
		<div style="clear: both;">&nbsp;</div>
	</div>
	<!-- end #page -->
</div>
</div>
	<div id="footer">
		<p>
        	<a href="index.php">Townsville Weather</a> |
			<a href="wnews.php">Weather News</a> |
			<a href="videos.php">Knowledge Repository</a> |
			<a href="aboutus.php">Abous Us</a> |
            <a href="feedback.php">Feedback</a> |
			<a href="contactus.php">Contact Us</a><br><br>
        Copyright (c) 2010 JCU - Townsville Weather Simulation Project. All rights reserved.</p>
	</div>
	<!-- end #footer -->
	
	
	<script type="text/javascript">

    var cm_map;
    var cm_mapMarkers = [];
    var cm_mapHTMLS = [];

    // Create a base icon for all of our markers that specifies the
    // shadow, icon dimensions, etc.

    var cm_baseIcon = new GIcon();
    cm_baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
    cm_baseIcon.iconSize = new GSize(20, 34);
    cm_baseIcon.shadowSize = new GSize(37, 34);
    cm_baseIcon.iconAnchor = new GPoint(9, 34);
    cm_baseIcon.infoWindowAnchor = new GPoint(9, 2);
    cm_baseIcon.infoShadowAnchor = new GPoint(18, 25);

    setTimeout('cm_load()', 500);

    //<![CDATA[
    
    var map = new GMap(document.getElementById("cmmap"));
    map.centerAndZoom(new GPoint(-83.022206, 39.998264), 3);

    //]]>

    </script>
</body>
</html>
